<!-- 数据大图 -->
<template>
  <div class="datapage">
    <div class="header"><h1>金华眼科医院数据中心</h1></div>
    <div class="container clearfix">
    	<div class="left pull-left">
    		<div class="data-mod data1">
    			<div class="data-mod-hd">
    				<h3 class="data-mod-title">近视检出率</h3>
    			</div>
    			<div class="data-mod-bd">
    				<div class="chart" id="mainCharts"></div>
    			</div><!-- /.data-mod-bd -->
    		</div><!-- /.data-mod -->
    		<div class="data-mod data2">
    			<div class="data-mod-hd">
    				<h3 class="data-mod-title">眼轴偏长率</h3>
    			</div>
    			<div class="data-mod-bd">
    				<div class="chart" id="alCharts"></div>
    			</div><!-- /.data-mod-bd -->
    		</div>
    		<div class="data-mod data2">
    			<div class="data-mod-hd">
    				<h3 class="data-mod-title">眼轴年平均增长度mm</h3>
    			</div>
    			<div class="data-mod-bd">
    				<div class="chart" id="increaseCharts"></div>
    			</div><!-- /.data-mod-bd -->
    		</div><!-- /.data-mod -->
    	</div><!-- /.left -->

    	<div class="center pull-left">
    		<div class="nums clearfix">
    			<div class="num-mod pull-left">
    				<div class="num-mod-hd">
    					<h3 class="num-mod-title">建档数量</h3>
    				</div>
    				<div class="num-mod-bd clearfix">
    					<div class="month f">206327</div>
    					<div class="last-month">
    						 <h5>当年总数</h5>
    						<div class="num f">3991</div>
    					</div>
    				</div>
    			</div><!-- /.num-mod -->

    			<div class="num-mod pull-left" style="padding-left:100px;">
    				<div class="num-mod-hd">
    					<h3 class="num-mod-title">近视率</h3>
    				</div>
    				<div class="num-mod-bd clearfix">
    					<div class="month f">69.95%</div>
    					<div class="last-month">
    						<h5>当年数据</h5>
    						<div class="num f">82.78%</div>
    					</div>
    				</div>
    			</div><!-- /.num-mod -->


    			<div class="num-mod pull-right">
    				<div class="num-mod-hd">
    					<h3 class="num-mod-title">监测数量</h3>
    				</div>
    				<div class="num-mod-bd clearfix">
    					<div class="month f">234935</div>
    					<div class="last-month">
    						<h5>当年总数</h5>
    						<div class="num f">603</div>
    					</div>
    				</div>
    			</div><!-- /.num-mod -->
    		</div><!-- /.nums -->
    		<div class="data-mod-center data7" style="margin-top:100px;">
    			<div class="data-mod-hd">
    				<h3 class="data-mod-title">三级预警</h3>
    			</div>
    			<div class="data-mod-bd">
    				<div class="chart" id="warningCharts"></div>
    			</div>
    		</div><!-- /.data-mod -->

    		<div class="data-mod-center data7">
    			<div class="data-mod-hd">
    				<h3 class="data-mod-title">新发率</h3>
    			</div>
    			<div  >
    				<div class="chart" id="newComeCharts"></div>
    			</div>
    		</div><!-- /.data-mod -->
    	</div><!-- /.center -->

    	<div class="right pull-right">
    		<div class="data-mod data7">
    			<div class="data-mod-hd">
    				<h3 class="data-mod-title">视力不良率</h3>
    			</div>
    			<div class="data-mod-bd">
    				<div class="chart" id="visualCharts"></div>
    			</div>
    		</div><!-- /.data-mod -->

    		<div class="data-mod data7">
    			<div class="data-mod-hd">
    				<h3 class="data-mod-title">握笔姿势错误率</h3>
    			</div>
    			<div class="data-mod-bd">
    				<div class="chart" id="errorHandCharts"></div>
    			</div>
    		</div><!-- /.data-mod -->

    		<div class="data-mod data7">
    			<div class="data-mod-hd">
    				<h3 class="data-mod-title">灯光检测情况</h3>
    			</div>
    			<div class="data-mod-bd">
    				<div class="chart" id="ckLightCharts"></div>
    			</div>
    		</div><!-- /.data-mod -->
    	</div><!-- /.right -->
    </div><!-- /.container -->
    </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import { getMyopia,getCheckLight,getEarlyWarning,getHoldPen } from '@/api/pvm/prevention/datacenter'

  var echarts = require('echarts');
  var warnJson = {"data":
          {
              "tooltip":{"trigger":"item","formatter":"{a} <br/>{b} : {c}"},
              "legend":{"x":"left","orient":"vertical","textStyle":{"color":"#03b0d8"},"data":["蓝色预警(未近视)","黄色预警(将近视)","红色预警(已近视)"]},
              "grid":{"left":"5%","top":"10%","right":"5%","bottom":"0%","containLabel":true},
              "series":[{"data":[{"value":"34.22","name":"蓝色预警(未近视)"},{"value":"42.79","name":"黄色预警(将近视)"},{"value":"14.72","name":"红色预警(已近视)"}],"name":"三级预警","type":"pie","itemStyle":{"normal":{"label":{"show":true,"formatter":"{b}:{c}%"},"color":"(function(params) {var colorList = ['#00FFFF', '#FFFF00', '#FF0000' ]; return colorList[params.dataIndex] })()"}},"label":{"color":"#03b0d8"},"radius":"92%"}]},"success":true};

  var mianJson = {
      "data":
          {
              "tooltip":{"trigger":"item","formatter":"{a} <br/>{b} : {c}"},
              "legend":{"x":"center","textStyle":{"color":"#03b0d8"},"data":["男","女"]},
              "grid":{"left":"5%","top":"10%","right":"5%","bottom":"0%","containLabel":true},
              "xAxis":[{"data":["3-6岁","7-12岁","13-15岁","16-18岁"],"type":"category","axisLabel":{"color":"#03b0d8"}}],
              "yAxis":[{"type":"value","axisLabel":{"color":"#03b0d8"},"min":0,"max":100}],
              "series":[{"data":["0","23.89","34.78","44.44"],"name":"男","type":"bar"},{"data":["0","19.18","34.69","58.33"],"name":"女","type":"bar"}]},"success":true};

  var visualJson = {"data":{"tooltip":{"trigger":"item","formatter":"{a} <br/>{b} : {c}"},"legend":{"x":"center","textStyle":{"color":"#03b0d8"},"data":["男","女"]},"grid":{"left":"5%","top":"10%","right":"5%","bottom":"0%","containLabel":true},"xAxis":[{"data":["3-6岁","7-12岁","13-15岁","16-18岁"],"type":"category","axisLabel":{"color":"#03b0d8"}}],"yAxis":[{"type":"value","axisLabel":{"color":"#03b0d8"},"min":0,"max":100}],"series":[{"data":["51.55","46.09","78.97","82.28"],"name":"男","type":"bar"},{"data":["54","51.76","84.78","85.19"],"name":"女","type":"bar"}]},"success":true};

  var alJson = {"data":{"tooltip":{"trigger":"item","formatter":"{a} <br/>{b} : {c}"},"legend":{"x":"center","textStyle":{"color":"#03b0d8"},"data":["男","女"]},"grid":{"left":"5%","top":"10%","right":"5%","bottom":"0%","containLabel":true},"xAxis":[{"data":["3-6岁","7-12岁","13-15岁","16-18岁"],"type":"category","axisLabel":{"color":"#03b0d8"}}],"yAxis":[{"type":"value","axisLabel":{"color":"#03b0d8"},"min":0,"max":100}],"series":[{"data":["72.17","82.92","93.14","90.28"],"name":"男","type":"bar"},{"data":["43.9","65.62","85.04","80.24"],"name":"女","type":"bar"}]},"success":true};

  var increaseJson = {"data":{"tooltip":{"trigger":"item","formatter":"{a} <br/>{b} : {c}"},"legend":{"textStyle":{"color":"#03b0d8"}},"grid":{"left":"5%","top":"10%","right":"5%","bottom":"0%","containLabel":true},"xAxis":[{"type":"value","axisLabel":{"color":"#03b0d8"},"min":0,"max":0.5}],"yAxis":[{"data":["未戴镜","周边离焦","角膜塑形镜"],"type":"category","axisLabel":{"color":"#03b0d8"}}],"series":[{"data":["0.42","0.35","0.16"],"name":"眼轴年平均增长度mm","type":"bar","itemStyle":{"normal":{"color":"#00FFFF"}}}]},"success":true};

  var errorHandJson = {"data":{
          "tooltip":{"trigger":"item","formatter":"{a} <br/>{b} : {c}"},
          "legend":{"x":"center","textStyle":{"color":"#03b0d8"},"data":["男","女"]},
          "grid":{"left":"5%","top":"10%","right":"5%","bottom":"0%","containLabel":true},
          "xAxis":[{"data":["3-6岁","7-12岁","13-15岁","16-18岁"],"type":"category","axisLabel":{"color":"#03b0d8"}}],
          "yAxis":[{"type":"value","axisLabel":{"color":"#03b0d8"},"min":0,"max":100}],
          "series":[{"data":["28.23","51.33","44.94","56.64"],"name":"男","type":"bar"},{"data":["28.17","50.09","39.11","47.3"],"name":"女","type":"bar"}]},"success":true};

  var ckLightJson = {"data":{"tooltip":{"trigger":"item","formatter":"{a} <br/>{b} : {c}"},"legend":{"textStyle":{"color":"#03b0d8"}},"grid":{"left":"5%","top":"10%","right":"5%","bottom":"0%","containLabel":true},"xAxis":[{"type":"value","axisLabel":{"color":"#03b0d8"},"min":0,"max":100}],"yAxis":[{"data":["课桌","均匀度","黑板"],"type":"category","axisLabel":{"color":"#03b0d8"}}],"series":[{"data":["61.55","34.88","84.96"],"name":"灯光检测情况","type":"bar"}]},"success":true};

  var newComeJson = {"data":{"tooltip":{"trigger":"item","formatter":"{b0}<br/>{a0}: {c0}%"},"legend":{"textStyle":{"color":"#03b0d8"}},"grid":{"left":"5%","top":"10%","right":"5%","bottom":"0%","containLabel":true},"xAxis":[{"data":["3-6岁","7-12岁","13-15岁","16-18岁"],"type":"category","axisLabel":{"color":"#03b0d8"}}],"yAxis":[{"type":"value","axisLabel":{"formatter":"{value}%","color":"#03b0d8"},"min":0,"max":10}],"series":[{"data":[-0.33,1.42,7.4,-2.21],"name":"新发率","type":"line","itemStyle":{"normal":{"label":{"show":true,"formatter":"{c0}%"}}}}]},"success":true};
  export default {
    data(){
      return {
          MyopiaData: '',
          ckLightData: '',
      }
    },
    created(){
      this.$nextTick(() => {
        this.warningCharts()
        this.mainCharts()
        this.visualCharts()
        this.alCharts()
        this.increaseCharts()
        this.errorHandCharts()
        this.ckLightCharts()
        this.newComeCharts()
      })
    },
    methods: {
      // 三级预警
      warningCharts(){
        let myChart = echarts.init(document.getElementById('warningCharts'))
        myChart.clear();
        myChart.showLoading({text: '正在努力的读取数据中...'});
        getEarlyWarning().then(response => {
          if(response.data.code == '0'){
            let WarnData = response.data.data
            warnJson.data.series[0].data[0].value = WarnData[0].countWarnB
            warnJson.data.series[0].data[1].value = WarnData[0].countWarnY
            warnJson.data.series[0].data[2].value = WarnData[0].countWarnR
            var option= warnJson.data
            option.series[0].itemStyle.normal.color=function(params) {var colorList = ['#00FFFF', '#FFFF00', '#FF0000' ]; return colorList[params.dataIndex] }
            myChart.setOption(option, true)
            myChart.hideLoading()
          }else{
            this.$message.error(response.data.msg)
          }
        })
      },
      // 近视检出率
      mainCharts(){
        var mainCharts = echarts.init(document.getElementById('mainCharts'));
        mainCharts.clear();
        mainCharts.showLoading({text: '正在努力的读取数据中...'})
        getMyopia().then(response => {
          if(response.data.code == '0'){
            let MyopiaData = response.data.data
            mianJson.data.series[0].data = MyopiaData[0].countNumLst
            mianJson.data.series[1].data = MyopiaData[1].countNumLst
            var option= mianJson.data
            mainCharts.setOption(option, true)
            mainCharts.hideLoading()
          }else{
            this.$message.error(response.data.msg)
          }
        })
      },
      // 视力不良率
      visualCharts(){
        var visualCharts = echarts.init(document.getElementById('visualCharts'));
        visualCharts.clear();
        visualCharts.showLoading({text: '正在努力的读取数据中...'})
        var option= visualJson.data;
        visualCharts.setOption(option, true);
        visualCharts.hideLoading();
      },
      // 眼轴偏长率
      alCharts(){
        var alCharts = echarts.init(document.getElementById('alCharts'));
        alCharts.clear();
        alCharts.showLoading({text: '正在努力的读取数据中...'})
        var option= alJson.data;
        alCharts.setOption(option, true);
        alCharts.hideLoading();
      },
      // 眼轴年增长度
      increaseCharts(){
        var increaseCharts = echarts.init(document.getElementById('increaseCharts'));
        increaseCharts.clear();
        increaseCharts.showLoading({text: '正在努力的读取数据中...'})
        var option= increaseJson.data;
        increaseCharts.setOption(option, true);
        increaseCharts.hideLoading();
      },
      // 握笔姿势错误率
      errorHandCharts(){
        var errorHandCharts = echarts.init(document.getElementById('errorHandCharts'));
        errorHandCharts.clear();
        errorHandCharts.showLoading({text: '正在努力的读取数据中...'})
        getHoldPen().then(response => {
          if(response.data.code == '0'){
            let errorHandData = response.data.data
            errorHandJson.data.series[0].data = errorHandData[0].holePanLst
            errorHandJson.data.series[1].data = errorHandData[1].holePanLst
            var option= errorHandJson.data
            errorHandCharts.setOption(option, true)
            errorHandCharts.hideLoading()
          }else{
            this.$message.error(response.data.msg)
          }
        })
      },
      // 灯光检测情况
      ckLightCharts(){
        var ckLightCharts = echarts.init(document.getElementById('ckLightCharts'));
        ckLightCharts.clear();
        ckLightCharts.showLoading({text: '正在努力的读取数据中...'})
        getCheckLight().then(response => {
          if(response.data.code == '0'){
            let ckLightData = response.data.data
            ckLightJson.data.series[0].data = ckLightData[0].lightLst
            var option= ckLightJson.data
            ckLightCharts.setOption(option, true)
            ckLightCharts.hideLoading()
          }else{
            this.$message.error(response.data.msg)
          }
        })
      },
      newComeCharts(){
        var newComeCharts = echarts.init(document.getElementById('newComeCharts'));
        newComeCharts.clear();
        newComeCharts.showLoading({text: '正在努力的读取数据中...'})
        var option= newComeJson.data;
        newComeCharts.setOption(option, true);
        newComeCharts.hideLoading();
      }
    }
  }
</script>

<style lang="scss" scoped>
  .avue-main {
    overflow: auto!important;
  }
  /deep/ .el-scrollbar {
     width:1920px!important;
     height:1080px!important;
     overflow: auto!important;
  }
  /deep/ .el-scrollbar__view {
    width:1920px!important;
    height:1080px!important;
    overflow: auto!important;
  }
  // .container {
  //   display: flex;
  //   flex-wrap: wrap;
  //   justify-content: space-around;
  // }
  // .data-item {
  //   flex: 0 1 50%;
  //   box-sizing: border-box;
  //   padding: 20px 10px;
  //   height: 350px;
  //   margin-bottom: 20px;
  //   background-color: #fff;
  // }
  // .nums {
  //   display: flex;
  //   flex-wrap: wrap;
  //   justify-content: space-between;
  // }
  // .nums-mod {
  //   flex: 0 1 45%;
  //   box-sizing: border-box;
  //   margin-bottom: 30px;
  // }
  // .nums-mod h3 {
  //   font-size: 26px;
  // }
  // .num-mod-bd {
  //   display: flex;
  //   flex-wrap: nowrap;
  //   justify-content: flex-start;
  // }
  // .month {
  //   font-size: 50px;
  //   margin-right: 15px;
  //   color: #7ecef4;
  // }
  // .last-month-title {
  //   font-size: 14px;
  //   color: #0cf;
  //   margin-top: 13px;
  // }
  // .last-month-num {
  //   color:#ffa200;
  //   font-size:24px;
  // }

  // .data-mod-hd {
  //   height:45px;
  //   line-height:45px;
  //   font-size:16px;
  //   margin-bottom:11px;
  // }
  // .data-mod-hd .data-mod-title {
  //   padding:0 0 0 20px;
  // }
  // .data-mod-bd {
  //   height:255px;
  // }
  // .data-mod-bd .data-panel {
  //   height:255px;
  //   padding:15px;
  //   box-sizing:border-box;
  // }
  // .chart {height:230px;}


  html, body, div, span, applet, object, iframe,  h1, h2, h3, h4, h5, h6, p, blockquote, pre,  a, abbr, acronym, address, big, cite, code,  del, dfn, em, img, ins, kbd, q, s, samp,  small, strike, strong, sub, sup, section, tt, var,  b, u, i, center,  dl, dt, dd, ol, ul, li,  fieldset, form, label, legend,  table, caption, tbody, tfoot, thead, tr, th, td,  article, aside, canvas, details, embed,  figure, figcaption, footer, header, hgroup,  menu, nav, output, ruby, section, summary,  time, mark, audio, video {margin: 0; padding: 0; border: 0; font: inherit; vertical-align: baseline; word-wrap: break-word; word-break: normal;}
  /* HTML5 display-role reset for older browsers */
  article, aside, details, figcaption, figure,  footer, header, hgroup, menu, nav, section {display: block;}
  html {-webkit-text-size-adjust:none;}
  body { line-height: 1; overflow-x:hidden; overflow-y:auto;}
  body.home{display:none;}
  ol, ul { list-style: none; }
  blockquote, q { quotes: none; }
  blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
  ins { text-decoration: none; }
  del { text-decoration: line-through; }
  table {border-collapse: collapse; border-spacing: 0;}
  h1,h2,h3,h4,h5,h6{font-weight:bold;}

  .pull-left {float:left !important;}
  .pull-right {float:right !important;}
  .clearfix:after {content:""; display:block; visibility:hidden; height:0; font-size:0; clear:both;}
  .text-left {text-align:left !important;}
  .text-center {text-align:center !important;}
  .text-right {text-align:right !important;}

  .bg-linear-purple {background:-webkit-linear-gradient(left, #5945d7, #b534d6); background:linear-gradient(to right, #5945d7, #b534d6);}
  .bg-linear-blue {background:-webkit-linear-gradient(left, #2798ea, #1de0e9); background:linear-gradient(to right, #2798ea, #1de0e9);}

  body {font-family:"Microsoft Yahei"; width:1920px; height:1080px; overflow:auto;}
  .datapage {background:url('../../../../const/cboard/bg.jpg') no-repeat 0 0;color:#7ecef4; font-size:14px;}

  .header {text-align:center; }
  .header>h1 {color:#0ab7ff; margin:0; font-size:30px; padding:20px 0;}

  .container {width:1920px; height:980px; margin:0 auto;}
  .left {width:495px; padding:20px 10px;}
  .center {width:800px; padding:120px 0 0 46px;}
  .right {width:495px; padding:20px 10px;}
  .service-runtime, .time {font-size:18px; height:90px;}

  .data-mod-center { width:800px; height:310px; margin-bottom:20px;}
  .data-mod {width:495px; height:310px; margin-bottom:20px;}
  .data-mod-hd {height:45px; line-height:45px; font-size:16px; margin-bottom:11px;}
  .data-mod-hd .data-mod-title {padding:0 0 0 20px;}
  .data-mod-bd {height:255px;}
  .data-mod-bd .data-panel {height:255px; padding:15px; box-sizing:border-box;}

  .customize-chart {display:flex; flex-wrap:nowrap; align-items:center; height:220px;}
  .customize-chart .customize-item {color:#8495c2; padding:0 4px; flex-grow:1; }
  .customize-chart-horizontal {display:flex; flex-direction: column; height:220px;}
  .customize-chart-horizontal .customize-item-wrapper {color:#8495c2; padding:4px 0; flex-grow:1;}
  .customize-chart-horizontal .customize-item {display:flex; align-items:center; height:100%;}
  .customize-chart-horizontal .customize-item>div {}
  .customize-item .item-num {font-size:12px; text-align:center;}
  .customize-item .item-bar .bar {border-radius:40px; width:10px; background-color:#fff; margin:3px auto; max-height:200px;}
  .customize-item .item-title {text-align:center; font-size:12px;}
  .customize-chart-blue .customize-item .item-num {color:#0cf;}
  .customize-chart-blue .customize-item .item-bar .bar {background-color:#0cf;}
  .customize-chart-yellow .customize-item .item-num {color:#fc0;}
  .customize-chart-yellow .customize-item .item-bar .bar {background-color:#fc0;}
  .customize-chart-red .customize-item .item-num {color:#fb487a;}
  .customize-chart-red .customize-item .item-bar .bar {background-color:#fb487a;}
  .customize-chart-horizontal .customize-item .item-title {width:40px; text-align:right; padding-right:6px;}
  .customize-chart-horizontal .customize-item .item-bar .bar {border-radius:40px; height:10px; background-color:#fff; margin:3px auto; max-width:400px;}
  .customize-chart-horizontal .customize-item .item-bar .bar-blue {background-color:#0cf;}
  .customize-chart-horizontal .customize-item .item-bar .bar-yellow {background-color:#fc0;}
  .customize-chart-horizontal .customize-item .item-bar .bar-red {background-color:#fb487a;}

  .f {font-family:"Agency FB";}
  .num-mod {}
  .num-mod .num-mod-title {color:#fff; margin-bottom:10px;}
  .num-mod .month {font-size:40px; float:left; margin-right:15px;}
  .num-mod .last-month {float:left; padding-top:12px;}
  .num-mod .last-month h5 {font-size:14px; color:#0cf;}
  .num-mod .last-month .num {color:#ffa200; font-size:24px; margin-top:4px;}

  .map {height:750px; margin-top:35px; box-sizing:border-box;}
  .chart {height:230px;}

  /*-webkit-*/
  @-webkit-keyframes rolling {
      from {
          width:0;
      }
      to {
          width:100%;
      }
  }

  @keyframes rolling {
      from {
          width:0;
      }
      to {
          width:100%;
      }
  }

</style>
